<template>
  <div class="h-[100%]">
    <div class="flex justify-between items-center h-[32px]" v-if="!is_authorization">
      <div class="flex items-center justify-center">
        <SvgIcon icon-class="gonggao1" />
        <span class="ml-[4px] font-bold">飞书日历</span>
      </div>
    </div>
    <template v-if="is_authorization">
      <Cal :height="height"/>
    </template>
    <template v-else>
      <div class="mt-[16px] text-[14px]">
        <div>未获取到飞书授权,请点击"飞书授权"按钮,执行授权操作</div>
        <div class="mt-[16px]">授权流程:</div>
        <div class="ml-[16px] mt-[8px]">
          <div>
            <span class="mr-[16px]">1.点击"飞书授权"按钮:</span
            ><el-button type="primary" @click="handleAuthorization"
              >飞书授权</el-button
            >
          </div>
          <div class="my-[8px]">2.使用手机飞书APP, 扫描授权二维码</div>
          <div>3. 手机飞书APP跳转授权页面,点击"授权",即完成飞书授权操作</div>
        </div>
      </div>
    </template>
  </div>
  <Authorization v-model="authorizationVisible" />
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import useUserStore from "@/store/modules/user";
import Cal from "@/components/Cal/index.vue";
import Authorization from "./authorization/index.vue";
const props = defineProps({
  height:{ type:String, default: '35vh' },
})
const userData = useUserStore();
const is_authorization = computed(() => userData.is_feishu_authorize);
const authorizationVisible = ref(false);
const handleAuthorization = () => {
  authorizationVisible.value = true;
};
</script>
